<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>如何使用-ZPCode UI Kits</title>
  <link rel="stylesheet" href="http://zx4.com:8001/kits/css/zpcode.min.css">
  <link rel="stylesheet" href="../statics/css/index.css">
  <link rel="stylesheet" href="../statics/highlight/styles/github-dark.min.css">
  <!--zpcode.min.js-->
  <script src="http://zx4.com:8001/kits/webcomponents/ZPElement.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/search/style01.js" type="module" defer></script>
  <!--zpcode.min.js-->
  <script src="../statics/webcomponents/layout/leftnav.js" type="module" defer></script>
  <script src="../statics/webcomponents/layout/footer.js" type="module" defer></script>
  <script src="../statics/webcomponents/table/compatibility.js" type="module" defer></script>
  <script src="../statics/js/usage/index.js" type="module" defer></script>
  <script src="../statics/js/extra.js" type="module" defer></script>
</head>
<body class="dark">
  <div class="mih12p f">
    <left-nav current="usage"></left-nav>
    <div class="fa bl1" style="width:0">
      <div class="c ma mt48 pb48">
        <h1>如何使用</h1>
        <hr>
        <h2 id="install"># 安装</h2>
        <p>您可以引入一个官网全局构建好的脚本：</p>
        <pre class="pr"><code class="hljs language-xml zp-usage-global"></code></pre>
        <h3>局部安装（推荐）</h3>
        <p>每个组件都有单独的引入链接，例如：</p>
        <pre class="pr"><code class="hljs language-xml zp-usage-single"></code></pre>
        <p><span class="txt-w">强烈推荐</span>在官网选择需要的组件<a href="http://zx4.com:8001/build" target="_blank">在线进行构建</a>，减少脚本请求数和体积大小以提升性能，然后下载至项目本地引用：</p>
        <pre class="pr"><code class="hljs language-xml zp-usage-parts"></code></pre>

        <hr class="mt36 mb36">
        <h2 id="usage"># 使用</h2>
        <p>如果您引入了官方构建的脚本，则需要使用官方预设好的标记，具体的标签名请查阅对应的文档。</p>
        <p>一般情况下，为方便记忆和使用，标记名称会采用<code>目录首字母+组件名称</code>的公式，示例：</p>
        <pre class="pr"><code class="hljs language-xml zp-usage-name"></code></pre>
        <p><code>al</code>是<code>animate</code>和<code>loading</code>的首字母组合，<code>text</code>或<code>circle</code>为组件名称。</p>
        <p>其它情况下，将采用<code>zp</code>作为标签前缀。</p>

        <hr class="mt36 mb36">
        <h2 id="compatibility"># 浏览器兼容性</h2>
        <p>虽然大部分浏览器已兼容 Web Component 特性，但您仍需考虑该组件库的兼容性问题以优化用户体验。如遇兼容性问题，建议您以复制源码的方式进行开发。</p>
        <p>以下是该组件库在各浏览器中支持的最低版本：</p>
        <zp-tablecom cols='[[53,"2016-08-31"],[79,"2020-01-15"],[63,"2018-10-23"],[40,"2016-09-20"],[10,"2016-09-20"],[53,"2016-09-07"],[63,"2018-10-23"],[41,"2016-10-25"],[10,"2016-09-13"],[53,"2016-09-07"]]'></zp-tablecom>

      </div>
      <zp-footer></zp-footer>
    </div>
    <div class="w200">
      <ul class="bl1 p0 mt48 pl24 ps t48 lh30">
        <li><a href="#install" class="txt-con txt-p-h">安装</a></li>
        <li><a href="#usage" class="txt-con txt-p-h">使用</a></li>
        <li><a href="#compatibility" class="txt-con txt-p-h">浏览器兼容性</a></li>
        <li class="mt12"><a href="#" class="txt-cg txt-b-h fs12">▲ 顶部</a></li>
      </ul>
    </div>
  </div>
  <script src="../statics/highlight/highlight.min.js"></script>
  <script src="../statics/highlight/languages/xml.min.js"></script>
  <script src="../statics/highlight/languages/css.min.js"></script>
</body>
</html>